<template>
  <div>
    <div id="chartscomp2" class="echart" ref="chart"></div>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
    },
    list: {
      type: Array,
    },
  },
  data() {
    return {
        fontSize:16,
      padding:false,
    };
  },
  watch: {
    list(n, o) {
      this.drawLine(n[0]);
    },
  },
  methods: {
    ScreenWidth(){
     
          if (screen.width <= 1920){
              this.fontSize=12;
              this.padding=false;
          }else{
             this.fontSize=16;
              this.padding=true;
          }
 },
    drawLine(n) {
      var that = this;
      this.ScreenWidth() 
      if (!n) return;
      // 基于准备好的dom，初始化echarts实例
     
        const chart = this.$refs.chart;
  
      // 基于准备好的dom，初始化echarts实例

      var myChart = this.$echarts.init(chart); //推荐
      var data=[]
  n.xAxis_data && n.xAxis_data.map((item,i)=>{
     data.push(item.substring(0,item.length-2));
  })
  //console.log(data);
      let options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: n.legend_data && n.legend_data,
          right: "0",
          top: "5%",
          textStyle: {
            //图例文字的样式
            color: "white",
            fontSize: that.fontSize,
          },
        },

        grid: {
          left: "3%",
          right: "4%",
          bottom: "0%",
          top: "20%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",

            data: data,
            formatter: (value, index) => {
       return "123123"
              },
 
            axisLine: {
              lineStyle: {
                color: "#2567ae",
                width: 2,
              },
            },
            axisLabel: {
              interval: 1, //横轴信息全部显示
              textStyle: {
                color: "white",
                fontSize:  that.fontSize,
              },
              rotate: 40,
               formatter : function(params){
                    if(params.length>=8){
                      return params.substring(0,6)+'...'
                    }
                     return params;
                }
 
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgb(26, 158, 209)",
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "rgb(52, 119, 188)",
                width: 2, //这里是为了突出显示加上的
              },
            },
            name: this.title,
            nameTextStyle: {
              color: "white",
              fontSize:  that.fontSize,
              padding: [0, 0, 0, 80],
            },
            splitLine: {
              show: true,
              lineStyle: {
                type: "dashed",
                color: "rgb(26, 158, 209)",
              },
            },
          },
        ],
        dataZoom: [
          {
            type: "inside", //详细配置可见echarts官网
            show: false, //是否显示
            realtime: true, //拖动时，是否实时更新系列的视图
            start: 0, //伸缩条开始位置（1-100），可以随时更改
            end: 100, //伸缩条结束位置（1-100），可以随时更改
          },
        ],
        series: [
          {
            name: n.series[0].name,
            type: "bar",

            barWidth: 4,
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: "rgb(4, 162, 201)",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: n.series[0].data,
          },
          {
            name: n.series[1].name,
            type: "bar",
            barWidth: 4,
            itemStyle: {
              emphasis: {
                barBorderRadius: 7,
              },
              normal: {
                barBorderRadius: 7,
                color: "rgb(129, 117, 222)",
              },
            },
            emphasis: {
              focus: "series",
            },
            data: n.series[1].data,
          },
        ],
      };

      // 绘制图表
      options && myChart.setOption(options);
      window.addEventListener("resize", () => {
        myChart.resize(); //resize 页面大小改变，调整大小
      });
    },
  },
  mounted() {
    this.drawLine(this.list[0]);
  },
};
</script>
<style lang="less" scoped>
.echart {
  width: 100%;
  height: 100%;
}
.font {
  font-size: 0.313vw;
  color: white;
}
</style>
